<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>YAML | Example &quot;accessible tabs with jQuery&quot;</title>

<style>
ul {
font: normal normal normal 0.875em/1 Arial, sans-serif;
list-style: none;
margin: 0px;
overflow: hidden;
padding: 0px;
}
ul li {
float: left;
height: 66px;
margin: 20px 20px 0px 0px;
width: 66px;
}
ul li a {
border: 1px solid transparent;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
display: block;
height: 64px;
line-height: 64px;
overflow: hidden;
text-decoration: none;
text-shadow: rgba(0, 0, 0, 0.496094) 0px -1px 0px;
width: 64px;
}
.technorati a {
-webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A3D679), to(#086B04));
border-color: #266F12;
color: #B62B91;
font-size: 108px;
position: relative;
text-indent: -9000px;
}
.technorati a::before {
-webkit-box-shadow: rgba(0, 0, 0, 0.597656) 0px 0px 2px;
border: 8px solid whiteSmoke;
border-bottom-left-radius: 45px 35px;
border-bottom-right-radius: 45px 35px;
border-top-left-radius: 45px 35px;
border-top-right-radius: 45px 35px;
content: '' ;
height: 25px;
position: absolute;
right: -5px;
top: 5px;
width: 40px;
}
.technorati a::after {
border-color: transparent whiteSmoke;
border-style: solid;
border-width: 0px 0px 18px 13px;
border-color:black red transparent red;
content: '' ;
height: 0px;
left: 20px;
position: absolute;
top: 40px;
width: 10px;
}
ul {
font: normal normal normal 0.875em/1 Arial, sans-serif;
list-style: none;
}







.j a {
-webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A3D679), to(#086B04));
border-color: #266F12;
color: #B62B91;
font-size: 108px;
position: relative;
text-shadow: white 3px 3px 1px, white -3px -3px 1px, white 3px -3px 1px, white -3px 3px 1px;
text-indent0: -9000px;
}
.j a::before {
-webkit-box-shadow: rgba(0, 0, 0, 0.597656) 0px 0px 2px;
border: 5px solid whiteSmoke;
border-radius: 5px 5px;
content: '' ;
height: 0px;
position: absolute;
right: 5px;
top: 10px;
width: 40px;
}
.j a::before{
-webkit-box-shadow: rgba(0, 0, 0, 0.597656) 0px 0px 2px;
border: 5px solid red;
border-radius: 5px 5px;
content: '' ;
height: 0px;
position: absolute;
right: 5px;
top: 15px;
width: 40px;
}
.jj a::after {
border-color: transparent whiteSmoke;
border-style: solid;
border-width: 0px 0px 18px 13px;
border-color:black red transparent red;
content: '' ;
height: 0px;
left: 20px;
position: absolute;
top: 40px;
width: 10px;
}





</style>

</head>
<body>
<!-- skip link navigation -->
<ul id="skiplinks">
	<li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li>
</ul>

<ul>
	<li class="j"><a href="#non" title="jerry mouse">Jerry</a></li>
</ul>

</body>
</html>
